<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <a-card :bordered="false">
            <div class="table-page-search-wrapper">
                <a-form layout="horizontal" >
                    <a-row :gutter="8">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="业务类型"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-select
                                        placeholder="请选择"
                                        allowClear
                                        v-model="queryParam.operationType"
                                >
                                    <a-select-option v-for="item in dictData.operationType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="业务流水号"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                                <a-input  v-model="queryParam.busNo"></a-input>
                            </a-form-item>
                        </a-col>
                        <template v-if="advanced">
                            <a-col :md="8" :sm="24">
                                <a-form-item label="申请时间开始"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-date-picker
                                            :local="local"
                                            showTime
                                            style="width: 100%"
                                            format="YYYY-MM-DD HH:mm:ss"
                                            v-model="queryParam.createTimeStart"
                                            placeholder="请输入申请时间开始"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :md="8" :sm="24">
                                <a-form-item label="申请时间结束"  :labelCol="labelCol" :wrapperCol="wrapperCol">
                                    <a-date-picker
                                            :local="local"
                                            showTime
                                            style="width: 100%"
                                            format="YYYY-MM-DD HH:mm:ss"
                                            v-model="queryParam.createTimeEnd"
                                            placeholder="请输入申请时间结束"
                                    />
                                </a-form-item>
                            </a-col>
                        </template>
                        <a-col :md="8" :sm="24">
                            <span class="table-page-search-submitButtons"  :md="!advanced && 8 || 24" :sm="24">
                                <a-button type="primary" @click="() =>{this.findWorkListBtn()}">查询</a-button>
                                <a-button style="margin-left: 8px" @click="() => {this.clearQueryAll()}">重置</a-button>
                                <a @click="toggleAdvanced" style="margin-left: 8px">
                                    {{ advanced ? '收起' : '展开' }}
                                    <a-icon :type="advanced ? 'up' : 'down'"/>
                                </a>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <vxe-grid
                    class="vxe-table-antd"
                    resizable
                    show-overflow
                    ref="myPendTable"
                    stripe
                    border
                    highlight-hover-row
                    highlight-current-row
                    highlight-hover-column
                    highlight-current-column
                    highlight-cell
                    row-id="id"
                    height="400"
                    size="small"
                    :columns="tableColumn"
                    :data="tableData"
                    :loading="loading"
                    :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"
                    :pager-config="tablePage"
                    @page-change="handlePageChange">
                <template v-slot:op_ass="{ row }">
                    <a-tooltip placement="top">
                        <template slot="title">
                            <span>查看详情</span>
                        </template>
                        <a-icon style="padding-right:10px;color: #0000FF;cursor: pointer;"  type="search" @click="editRow(row)" ></a-icon>
                    </a-tooltip>
                </template>
            </vxe-grid>
        </a-card>
    </div>
</template>

<script>
    import { getBatchDict} from "@/services/system/api"
    import { getAllApplyingTasks} from "@/services/system/workflowApi"
    import zh_cn from 'ant-design-vue/es/date-picker/locale/zh_CN'
    import moment from 'moment'
    export default {
        name: 'AllPend',
        components: {
        },
        data () {
            return {
                local:zh_cn,
                dictData: {},
                // 高级搜索 展开/关闭
                advanced: false,
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 }
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 }
                },
                // 查询参数
                queryParam:{
                    opUserId: this.opUserId,
                    pageNum: 1,
                    pageSize: 20
                },
                //待办列
                tableColumn:[
                    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号' },
                    { field: 'busNo', title: '业务流水号',  visible: true, align: 'center', width: 150 },
                    { field: 'operationName', title: '业务名称',  visible: true, align: 'center', width: 150 },
                    { field: 'operationType', title: '业务类型',  visible: true, align: 'center', width: 150 },
                    { field: 'remarks', title: '摘要',  visible: true, align: 'center', width: 300 },
                    { field: 'createTime', title: '操作时间',  visible: true, align: 'center', width: 150 },
                    { field: 'op', title: '操作', align: 'center',  width: 120,fixed: 'right',slots: {default: 'op_ass'} }
                ],
                //待办数据
                tableData: [],
                loading: false,
                //分页配置
                tablePage: {
                    total: 0,
                    currentPage: 1,
                    pageNum: 1,
                    pageSize: 20
                },
                opUserId:null,
            }
        },
        mounted(){

        },
        created () {
            // 数据初始化
            const params = {}
            params.dictFields = 'operationType,applicantType'
            this.$http.post(getBatchDict,params).then(res => {
                this.dictData = res.result;
            })
            let accessToken=this.$store.state.user.accessToken;
            if(accessToken){
                let userInfo=this.$store.state.user.userInfo;
                this.opUserId=userInfo.userId;
            }else{
                this.$notification.error({
                    message: '登录提示',
                    description: `未登录,请先登录`
                })
            }
            this.clearQueryAll();

        },
        methods: {

            //条件查询待办事项
            findWorkListBtn(){
                this.tablePage.pageNum = 1
                this.tablePage.currentPage = 1
                this.workQuerylList()
            },
            //清空条件查询所有待办事项
            clearQueryAll () {
                this.queryParam = {
                    opUserId: this.opUserId,
                    pageNum: 1,
                    pageSize: 20
                };
               this.workQuerylList()
            },
            //展开和收起
            toggleAdvanced () {
                this.advanced = !this.advanced
            },
            //改变当前页
            handlePageChange ({ currentPage, pageSize }) {
                this.tablePage.pageNum = currentPage
                this.tablePage.currentPage = currentPage
                this.tablePage.pageSize = pageSize
                this.workQuerylList()
            },
            //办理
            editRow(row){
                let routeData = this.$router.push({
                    path: "./PageRecover",
                    query: {busNo: row.busNo,procInstId:row.procInstId}
                });
                window.open(routeData.href, "_self");
            },
            //查询待办事项
            workQuerylList(){
                this.queryParam.pageNum=this.tablePage.pageNum;
                this.queryParam.pageSize=this.tablePage.pageSize;
                if(this.queryParam.createTimeStart!=null){
                    this.queryParam.createTimeStart=moment(this.queryParam.createTimeStart).format('YYYY-MM-DD HH:mm:ss');
                }
                if(this.queryParam.createTimeEnd!=null){
                    this.queryParam.createTimeEnd=moment(this.queryParam.createTimeEnd).format('YYYY-MM-DD HH:mm:ss');
                }
                this.tablePage.total=1;
                this.$http.post(getAllApplyingTasks,this.queryParam).then((res) => {
                    this.tableData= res.result.list;
                    this.tablePage.total=res.result.total;
                }).catch(() => {

                })
            },
        }
    }
</script>
<style lang="less" scoped>
</style>